<!DOCTYPE html>
<html>
	<head>
	    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	    <title>疾病防御</title>
	    <!-- 引入layui css文件 -->
	    <link rel="stylesheet" href="layui-v2.2.3/layui/css/layui.css">
	    <!-- 自定义 css -->
	    <link rel="stylesheet" href="css/index.css">
		<script src="./js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- Header -->
			<div class="header">
				<!-- 个性化标题 -->
				<div class="mytitle">
					<label>母婴护理知识共享平台</label>
				</div>
				<!-- 导航栏 -->
				<div class="mymenu-content">
					<ul class="mymenu">
						<li><a href="index.html">首页</a></li>
						<li><a href="message.html">寄语</a></li>
						<li><a href="photos.html">宝贝墙</a></li>
						<li><a href="about.html">营养推荐</a></li>
						<li><a href="">疾病预防</a></li>
						<li><a href="books.html">个人中心</a></li>
					</ul>
				</div>
				<!-- 隐藏功能 -->
				<div class="other-functions">
					<a href="login.html">登录</a>
					<label>/</label>
					<a href="register.html">注册</a>
				</div>
				<!-- 搜索框 -->
				<div class="query">
					<input class="keyword" placeholder="搜索内容"/>
					<i class="layui-icon" style="margin-right: 20px; font-size: 18px;">&#xe615;</i>
				</div>
			</div>
			<!-- 个性签名 -->
			<div class="my-sign">
				<!--  包含标志和签名 -->
				<div class="my-signImg">
					<img id="my-signImg" src="img/my-sign.gif">
					<div class="my-signWord">
						<span class="my-signTitle" id="my-signTitle">匆匆时光</span>
						<span class="my-signBody" id="my-signBody">I' am waiting for you here.</span>
					</div>
				</div>
			</div>
			<!-- Content -->
			<div class="main-content">
				<!-- 个人以及所有文章、留言、照片汇总 包含大分类以及小标签 左面版 -->
				<div class="my-totalContent">
					<!-- 1.个人以及汇总部分 -->
					<div class="blog-inTotal">
						<!-- 头像 -->
						<img src="img/IMG_1568.PNG">
						<!-- 说明 -->
						<span>——好好学习，天天向上吧</span>
						<!-- 各方面汇总(各项目以及数量) -->
						<fieldset class="layui-elem-field">
							<legend>文章标签</legend>
							<!-- 用于存放tags -->
							<div class="layui-field-box" id="tagContent">
								<span class="layui-badge-rim" style="height: 30px;line-height: 30px;margin-top: 13px;margin-left: 10px;font-weight: 400;">论语</span>
								<span class="layui-badge-rim" style="height: 30px;line-height: 30px;margin-top: 13px;margin-left: 10px">道德经</span>
								<span class="layui-badge-rim" style="height: 30px;line-height: 30px;margin-top: 13px;margin-left: 10px">余华作品</span>
								<span class="layui-badge-rim" style="height: 30px;line-height: 30px;margin-top: 13px;margin-left: 10px">沈从文</span>
								<span class="layui-badge-rim" style="height: 30px;line-height: 30px;margin-top: 13px;margin-left: 10px">冰心选集</span>
								<span class="layui-badge-rim" style="height: 30px;line-height: 30px;margin-top: 13px;margin-left: 10px">小说散文</span>
								<span class="layui-badge-rim" style="height: 30px;line-height: 30px;margin-top: 13px;margin-left: 10px">随笔</span>
								<span class="layui-badge-rim" style="height: 30px;line-height: 30px;margin-top: 13px;margin-left: 10px">外国文学</span>
								<span class="layui-badge-rim" style="height: 30px;line-height: 30px;margin-top: 13px;margin-left: 10px">人生感悟</span>
								<span class="layui-badge-rim" style="height: 30px;line-height: 30px;margin-top: 13px;margin-left: 10px">遇见你</span>
								<span class="layui-badge-rim" style="height: 30px;line-height: 30px;margin-top: 13px;margin-left: 10px">日记</span>
								<span class="layui-badge-rim" style="height: 30px;line-height: 30px;margin-top: 13px;margin-left: 10px">绘画</span>
								<span class="layui-badge-rim" style="height: 30px;line-height: 30px;margin-top: 13px;margin-left: 10px">诗经</span>
								<span class="layui-badge-rim" style="height: 30px;line-height: 30px;margin-top: 13px;margin-left: 10px">诗词研究</span>
								<span class="layui-badge-rim" style="height: 30px;line-height: 30px;margin-top: 13px;margin-left: 10px">历代书法</span>
							
							</div>
						</fieldset>
					</div>
				</div>
				<!-- 主体显示部分 右面板 -->
				<div class="content-body">
					<!-- 爱好面板 -->
					<div class="blog-item" style="text-align: left;">
						<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;margin: 50px 0px;">
							<legend>疾病预防需注意</legend>
						</fieldset> 
							<ul class="layui-timeline" v-for="item in content" :key="item.id">
							
							<li class="layui-timeline-item">
								<i class="layui-icon layui-timeline-axis"></i>
								<div class="layui-timeline-content layui-text">
								<div class="layui-timeline-title">{{item.message}}</div>
								</div>
							</li>
							
							
							</ul>
					</div>
				</div>
				<hr class="my-line">
			</div>
		</div>
    <script src="layui-v2.2.3/layui/layui.js"></script>
    <!-- 引入jquery js -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <!-- 自定义 js -->
    <script src="js/index.js"></script>
    <script>
        $(function () {
            //init
            component.init();
        });
    </script>
	</body>
	<script>
		
        new Vue({
            el:"#app",
            data:{
                hello:"helloWorld",
				content:[
					{
						"message": "预防手足口病，应勤洗手、保持环境清洁、避免与患者密切接触，特别是疫情高发期间，避免带婴幼儿到人群密集场所。",
						"id": "1"
					},
					{
						"message": "预防感冒，应勤通风、保持室内清洁、合理营养、适时补充维生素，避免宝宝过度疲劳和受凉。",
						"id": "2"
					},
					{
						"message": "预防肺炎，应及时接种疫苗、注意保暖、避免宝宝接触感染源、保持室内空气流通。",
						"id": "3"
					},
					{
						"message": "预防湿疹，应保持皮肤清洁、保湿，避免过度洗澡和使用刺激性洗涤剂，避免食用过敏原食物。",
						"id": "4"
					},
					{
						"message": "预防腹泻，应保证饮食卫生、喂养时避免喂食过冷、过热食物，加强个人卫生和环境卫生。",
						"id": "5"
					},
					{
						"message": "预防中耳炎，应避免宝宝受凉、勿用力吸吐宝宝鼻涕、保持环境清洁、勤换洗宝宝的毛巾。",
						"id": "6"
					},
					{
						"message": "预防手足口病，应勤洗手、保持环境清洁、避免与患者密切接触，特别是疫情高发期间，避免带婴幼儿到人群密集场所。",
						"id": "7"
					},
					{
						"message": "预防感冒，应勤通风、保持室内清洁、合理营养、适时补充维生素，避免宝宝过度疲劳和受凉。",
						"id": "8"
					},
					{
						"message": "预防肺炎，应及时接种疫苗、注意保暖、避免宝宝接触感染源、保持室内空气流通。",
						"id": "9"
					},
					{
						"message": "预防湿疹，应保持皮肤清洁、保湿，避免过度洗澡和使用刺激性洗涤剂，避免食用过敏原食物。",
						"id": "10"
					}
				]
            },
            // 创建就运行
            created() {
            
            },
            // 方法
            methods: {
            
            }
        })
    
	</script>
</html>